<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>资金管理</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h1>资金管理</h1>
        
        <div class="nav-buttons">
            <a href="/" class="btn">首页</a>
            <a href="/expenses" class="btn">查看支出</a>
            <a href="/budget/history" class="btn">历史资金</a>
        </div>
        
        <h2>当前资金</h2>
        
        {% if current_budgets %}
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>总金额</th>
                            <th>剩余金额</th>
                            <th>已用金额</th>
                            <th>使用率</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for b in current_budgets %}
                            <tr>
                                <td data-label="总金额">￥{{ b.budget }}</td>
                                <td data-label="剩余金额">￥{{ b.remaining }}</td>
                                <td data-label="已用金额">￥{{ "%.2f"|format(b.budget - b.remaining) }}</td>
                                <td data-label="使用率">{{ "%.1f"|format(((b.budget - b.remaining) / b.budget * 100)) if b.budget > 0 else 0 }}%</td>
                                <td data-label="操作">
                                    <form method="POST" action="/budget/delete/{{ b.id }}" style="display:inline;">
                                        <button type="submit" class="btn" onclick="return confirm('确定要删除这个资金吗？')">删除</button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- 添加重新计算按钮 -->
            <form method="POST" action="/budget/recalculate" style="margin: 20px 0;">
                <button type="submit" class="btn" onclick="return confirm('确定要重新计算当月剩余金额吗？')">重新计算</button>
            </form>
        {% else %}
            <p>没有设置资金。</p>
        {% endif %}
        
        <h2>添加/调整资金</h2>
        <form method="POST" action="/budget">
            <div class="form-group">
                <label>金额:</label>
                <input type="number" step="0.01" name="budget" required>
            </div>
            <button type="submit" class="btn">添加/更新资金</button>
        </form>
    </div>
</body>
</html>